<template>
  <div class="view-container">
    <el-card class="info-card">
      <!--<el-button type="text" class="edit-btn" @click.stop.prevent="editForm()">修改</el-button>-->

      <div v-show="!edit">
        <el-form label-width="100px">
          <el-form-item label="姓名:">
            <div>{{showInfo.name}}</div>
            <!--<el-input v-model="showInfo.name" :disabled="true"></el-input>-->
          </el-form-item>
          <el-form-item label="手机号码:">
            <div>{{showInfo.phone}}</div>
            <!--<el-input v-model="showInfo.phone" :disabled="true"></el-input>-->
          </el-form-item>
          <el-form-item label="提现银行卡:">
            <div>{{showInfo.bankNum}} {{showInfo.bankTypeStr}}</div>
            <!--<el-input v-model="showInfo.bankNum" :disabled="true"></el-input>-->
          </el-form-item>
        </el-form>
      </div>

      <div v-if="edit">
        <el-form label-width="100px" :model="editInfo" :rules="rules" ref="editInfo">
          <el-form-item label="姓名:" prop="name">
            <el-input v-model="editInfo.name" placeholder="请输入您的姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号码:" prop="phone">
            <el-input v-model.number="editInfo.phone" placeholder="请输入您的手机号码"></el-input>
          </el-form-item>
          <el-form-item label="提现银行卡:" prop="bankNum">
            <el-input v-model.number="editInfo.bankNum" placeholder="请输入您的提现银行卡号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveSubmit('editInfo')">保存</el-button>
            <el-button @click="edit=false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-dialog class="info-dialog" :size="'tiny'" title="修改联系人信息操作需验证身份" :visible.sync="dialogVisible" :show-close="false" :close-on-press-escape="false" :close-on-click-modal="false">
      <div>
        <span>已向您的手机{{showInfo.phone | phoneSecret}}发送验证码，请注意查收</span>
        <el-form label-width="60px" :label-position="'left'"  class="info-dialog-form">
          <el-form-item label="验证码">
            <el-input  placeholder="请输入验证码" ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click.stop.prevent="validateCode()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {getInfo} from '@/api/user';
  import {validatePhoneNum} from '@/utils/validate';

  export default {
    name: 'userInfo',
    data ()
    {
      const validatePhone = (rule, value, callback) =>
      {
        if (value.length <=0)
        {
          callback(new Error('请输入手机号码'));
        }
        else if(!validatePhoneNum(value))
        {
          callback(new Error('手机号码输入有误，请重新输入'));
        }
        else
        {
          callback()
        }
      };
      return {
        edit:false, //开启修改
        showInfo:{  //显示的表单信息
          name:'',
          phone:'',
          bankNum:'',
          bankType:'',
          bankTypeStr:'',
        },
        editInfo: {  //用于修改的表单信息
          name: '',
          phone: '',
          bankNum: '',
          bankType:'',
          bankTypeStr:'',
        },
        rules:{ //修改信息表单验证
          name:[
            {required:true, message:'请输入姓名',trigger:'blur'},
          ],
          phone:[
            {required:true, validator: validatePhone, trigger:'blur'},
          ],
          bankType:[
            {required:true, message:'请输入姓名', trigger:'change'},
          ],
          bankNum:[
            {required:true, message:'请输入提现银行卡号', trigger:'blur'},
          ],
        },
        dialogVisible:false, //短信验证弹窗
      }
    },
    mounted()
    {
       this.getAccount();
    },
    methods: {
      getAccount()
      {
        getInfo().then((resp)=>{
          let data = resp.data;
          this.showInfo.name = data.contactName;
          this.showInfo.phone = data.contactPhone;
          this.showInfo.bankNum = data.bankCardNumber;
          this.showInfo.bankType = data.bankType;
          this.showInfo.bankTypeStr = data.bankTypeStr;

        }).catch((err)=>{

        });
      },
      editForm()
      {

        //TODO获取短信验证码，打开验证窗口
        //....
        this.dialogVisible = true;

      },
      validateCode() //验证短信验证码
      {
         //TODO短信验证码成功后，打开修改窗口
        this.dialogVisible = false;

        //复制数据
        this.editInfo.name = this.showInfo.name;
        this.editInfo.phone = this.showInfo.phone;
        this.editInfo.bankNum = this.showInfo.bankNum;
        this.editInfo.bankType = this.showInfo.bankType;
        this.editInfo.bankTypeStr = this.showInfo.bankTypeStr;

        this.edit = true;

      },
      saveSubmit(formName)
      {
        this.$refs[formName].validate((valid) => {
          if (valid) {

          } else {
            return false;
          }
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .info-card {
    max-width: 600px;
    box-shadow: none;
    padding: 30px 50px 10px 0;
    position: relative;

    .show-info
    {

    }

    .edit-btn
    {
       position: absolute;
       right: 20px;
       top: 10px;
       display: none;
    }

    &:hover
    {
      .edit-btn
      {
        display: block;
      }
    }

  }

  .info-dialog
  {
    .info-dialog-form
    {
      max-width: 200px;
      margin-top: 30px;
    }
  }

</style>
